<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,role-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" method="post" action="${role !=null ? 'role/update.do':'role/insert.do'}" id="roleForm">
	<!-- 修改的id，隐藏域 -->
	<input type="hidden" name="roleId" value="${role.roleId}">
	
	<!-- 权限id隐藏域 -->
	<input id="permissionId" type="hidden" name="permissionIds">
	
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="${role.rolename}" placeholder="请输入角色名称" id="rolename" name="rolename">
		</div>
	</div>
	
	
	
	
	 <div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">角色描述：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<textarea name="remark" cols="" rows="" class="textarea"  placeholder="请输入角色描述" ">${role.remark}</textarea>
			<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
		</div>
	</div> 
	
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">拥有权限：</label>
		<div class="formControls col-xs-8 col-sm-9">
			
			<ul id="permissionTree" class="ztree"></ul>
			
		</div>
	</div> 
	
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去--> 
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script> 


<script type="text/javascript">
/* zTree分配权限js */
 /* zTree的设置对象  */
var setting = {	
		/* 异步加载数据 */
		async: {
			enable: true,
			url:"permission/getAllPermission.do",
			/* 数据过滤 （对ajax返回数据预处理）,zTree渲染效果之前 */
			dataFilter: ajaxDataFilter 
		},
		data: {
			/* 设置支持简单数据 */
			simpleData: {
				enable: true,
				idKey:"permissionId",
				pIdKey:"parentId"
					
			}
		},
		/* 设置显示复选框 */
		check: {
			enable: true
		},
		/* 异步的回调 */
		callback: {
			/* 异步加载成功回调 */
			onAsyncSuccess: zTreeOnAsyncSuccess
		}
		
	};
	
	
/* 异步加载成功回调函数 */
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
   /* 
   		数据回显思路
   		1,将后台共享的角色权限id切割成数组
   		var permissionIds = "58,31,35,32,33,34";
   		var permissionIdsArr = permissionIds.split(",");
   		2,循环权限id，选中这些权限id对应的节点
   			（zTree树插件拥有根据属性的值获取节点的方法，根据节点permissionId属性获取对应的节点）
   		3，让其对应的节点复选框选中即可		
   */
	var permissionIds = "${role.permissionIds}";
		var permissionIdsArr = permissionIds.split(",");
		
		//获取树对象
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		
		for(var i = 0;i<permissionIdsArr.length;i++){
			
			//获取每一个权限id
			var permissionId = permissionIdsArr[i];
			
			//通过节点的permissionId数据属性获取对应的节点
			var node = treeObj.getNodeByParam("permissionId", permissionId, null);
			
			console.log(node);
			
			//让其对应的节点选中
			treeObj.checkNode(node, true, false);
			
		}
};

	/* 预处理数据函数 */
	function ajaxDataFilter(treeId, parentNode, responseData) {
	    if (responseData) {
	      for(var i =0; i < responseData.length; i++) {
			//清空url地址，防止点击跳转
			responseData[i].url = null;
			responseData[i].open = true;
	      }
	    }
	    return responseData;
	};

	/* 初始化zTree */
	$(function(){
		$.fn.zTree.init($("#permissionTree"), setting);
	});
	
	


</script>


<script type="text/javascript">
$(function(){
	//开始进行jquery.validate 表单插件进行表单校验
	
	$("#roleForm").validate({
		rules:{
			rolename:{
				required:true,
			},
			
		},
		messages:{
			rolename:{
				required:"角色名称不能为空",
			},
		
			
		},
		/* 
			校验成功的回调函数
			form:表单dom对象
			使用ajax异步提交即可
			
			DOM对象转换Jquery对象 ： $(dom对象)
		
		*/
		submitHandler:function(form){
			
			//获取zTree树对象： 没有# ，不是jquery的id选择器
			var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
			//获取选中的节点
			var nodes = treeObj.getCheckedNodes(true);
			
			if(nodes.length==0){
				layer.msg("请分配权限以后再提交数据！");
				return false;//终止程序运行
			}
			//声明数组用于封装权限id
			var permissionIdsArr = [];
			//循环节点
			for(var i = 0 ;i<nodes.length;i++){
				var node = nodes[i];
				
				permissionIdsArr.push(node.permissionId);
			}
			
			console.log(permissionIdsArr)
			//var permissionIds = permissionIdsArr.toString();
			var permissionIds = permissionIdsArr.join(",");
			
			//将权限id设置表单隐藏域
			$("#permissionId").val(permissionIds);
			
			$(form).ajaxSubmit(function(data){
				//提示
				layer.msg(data.msg, {icon: data.code,time:1500},function(){
					if(data.code == 1){
						//刷新父页面的bootstrap-table表格
						parent.refreshTable();
						//让父页面关闭弹出框
						parent.layer.closeAll();
					}
				});  
			});
			
			
		}
	})
	
	
	
	
});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>